<template>
  <view class="shop-container">

    <!-- 滚动内容区域 -->
    <scroll-view class="scroll-content" scroll-y>
      <!-- 店铺信息区域 -->
      <view class="shop-info-section">
        <!-- 有店铺时显示店铺信息 -->
        <view class="shop-info" v-if="hasShop">
          <view class="shop-header">
            <image class="shop-logo" :src="shopInfo.shopLogo" mode="aspectFill"></image>
            <view class="shop-details">
              <text class="shop-name">{{ shopInfo.company || shopInfo.shopName }}</text>
              <text class="shop-category">{{ shopInfo.shopOwner || '' }}</text>
              <view class="shop-stats" v-if="shopInfo.status === 1">
                <text class="stat-item">商品 {{ shopData.productNum || 0 }}</text>
                <text class="stat-item">订单 {{ shopData.orderNum || 0 }}</text>
                <!--                <text class="stat-item">评分 {{ shopInfo.rating || 0 }}</text>-->
              </view>
            </view>
            <!--            <view class="shop-actions" v-if="shopInfo.status === 1">-->
            <!--              <view class="action-btn" @click="editShop">-->
            <!--                <u-icon name="edit-pen" size="32" color="#666"></u-icon>-->
            <!--              </view>-->
            <!--            </view>-->
          </view>

          <!-- 店铺状态 -->
          <view class="shop-status">
            <view class="status-item">
              <text class="status-label">{{
                  shopInfo.status === 1 ? '店铺状态' : '审核状态'
                }}
              </text>
              <text class="status-value" :class="{
                active: shopInfo.status === 1,
                pending: shopInfo.status === 0,
                rejected: shopInfo.status === 2
              }">
                {{ shopInfo.status !== 1 ? shopInfo.status_dictText : '营业中' }}
              </text>
            </view>
            <view class="status-item" v-if="shopInfo.status === 1">
              <text class="status-label">营业额</text>
              <text class="status-value money">¥{{ shopData.turnover || '0.00' }}</text>
            </view>
            <view class="status-item" v-if="shopInfo.status === 0">
              <text class="status-label">操作</text>
              <text class="status-value action-text" @click="viewSubmittedInfo">查看提交信息</text>
            </view>
            <view class="status-item" v-else-if="shopInfo.status === 2">
              <text class="status-label">操作</text>
              <text class="status-value action-text" @click="reEditShop">重新编辑</text>
            </view>
          </view>

          <!-- 审核失败时显示拒绝原因 -->
          <view class="reject-reason" v-if="shopInfo.status === 2 && shopInfo.remark">
            <view class="reason-header">
              <text class="reason-label">拒绝原因</text>
            </view>
            <view class="reason-content">
              <text class="reason-text">{{ shopInfo.remark }}</text>
            </view>
          </view>
        </view>

        <!-- 无店铺时显示入驻提示 -->
        <view class="no-shop" v-else>
          <image class="no-shop-icon"
                 src="https://file.casugn.com/storecompcard/temp/dukan_1757670312925.png"
                 mode="aspectFit"></image>
          <text class="no-shop-title">您还没有开通店铺</text>
          <text class="no-shop-desc">开通店铺，开启您的电商之旅</text>
          <view class="join-btn" @click="joinShop">
            <text class="join-text">店铺入驻</text>
          </view>
        </view>
      </view>

      <!-- 功能菜单区域 -->
      <view class="menu-section" v-if="hasShop && shopInfo.status === 1">
        <view class="menu-group">
          <text class="group-title">商品管理</text>
          <view class="menu-list">
            <view class="menu-item" @click="goToPage('/pagesMall/myShop/myShopGoods')">
              <view class="menu-left">
                <view class="menu-icon product-icon">
                  <u-icon name="bag" size="40" color="#4182bb"></u-icon>
                </view>
                <text class="menu-title">商品管理</text>
              </view>
              <view class="menu-right">
                <text class="menu-count" v-if="shopInfo.productCount > 0">{{
                    shopData.productNum
                  }}
                </text>
                <u-icon name="arrow-right" size="28" color="#c0c4cc"></u-icon>
              </view>
            </view>
          </view>
        </view>

        <view class="menu-group">
          <text class="group-title">订单管理</text>
          <view class="menu-list">
            <view class="menu-item" @click="goToPage('/pagesMall/myShop/orderManage')">
              <view class="menu-left">
                <view class="menu-icon order-icon">
                  <u-icon name="list" size="40" color="#ff6b35"></u-icon>
                </view>
                <text class="menu-title">商品订单</text>
              </view>
              <view class="menu-right">
                <text class="menu-count" v-if="shopInfo.orderCount > 0">{{
                    shopData.orderNum
                  }}
                </text>
                <u-icon name="arrow-right" size="28" color="#c0c4cc"></u-icon>
              </view>
            </view>
          </view>
        </view>

                <view class="menu-group">
                  <text class="group-title">提现服务</text>
                  <view class="menu-list">
                    <view class="menu-item" @click="goWithdrawal">
                      <view class="menu-left">
                        <view class="menu-icon distribution-icon">
                          <u-icon name="share" size="40" color="#10c469"></u-icon>
                        </view>
                        <text class="menu-title">提现管理</text>
                      </view>
                      <view class="menu-right">
                        <u-icon name="arrow-right" size="28" color="#c0c4cc"></u-icon>
                      </view>
                    </view>
                  </view>
                </view>

        <view class="menu-group">
          <text class="group-title">客户服务</text>
          <view class="menu-list">
            <view class="menu-item" @click="goShop">
              <view class="menu-left">
                <view class="menu-icon review-icon">
                  <u-icon name="star" size="40" color="#ffb800"></u-icon>
                </view>
                <text class="menu-title">商品评价</text>
              </view>
              <view class="menu-right">
                <text class="menu-count" v-if="shopInfo.reviewCount > 0">{{
                    shopInfo.reviewCount
                  }}
                </text>
                <u-icon name="arrow-right" size="28" color="#c0c4cc"></u-icon>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部安全区域 -->
      <view class="safe-area-bottom"></view>
    </scroll-view>
  </view>
</template>

<script>
import {mapGetters} from 'vuex'

export default {
  data() {
    return {
      statusBarHeight: 0,
      shopData: {},//店铺数据
      hasShop: true, // 是否有店铺，可以根据实际情况动态设置
      shopInfo: {
        name: '',
        category: '',
        logo: '',
        status: '',
        productCount: 0,
        orderCount: 0,
        reviewCount: 0,
        rating: '0',
        todayIncome: '0'
      }
    }
  },

  onLoad() {
    this.getSystemInfo()
  },
  onShow() {
    this.loadShopInfo()
  },
  computed: {
    // ...mapGetters(['openId'])
    ...mapGetters(['userInfo']),
  },
  methods: {
    goShop() {
      // console.log('点击店铺了', this.shopInfo)
      uni.navigateTo({url: `/pagesMall/myShop/shopInfo?shopId=${this.shopInfo.id}`})
    },
    // 提现管理
    goWithdrawal(){
      uni.navigateTo({url: `/pagesMall/myShop/withdrawalManage?shopId=${this.shopInfo.id}&cardId=${this.userInfo.cardId}`})
    },
    // 查询店铺数据
    _getBusinessData() {
      const params = {
        cardId: this.userInfo.id
      }
      this.$api.getBusinessData(params).then((res) => {
        if (res.success && res.result) {
          this.shopData = res.result
        } else {
          this.shopData = {}
        }
        console.log('店铺数据', res)
      })
    },
    // 获取系统信息
    getSystemInfo() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 0
    },

    // 加载店铺信息
    loadShopInfo() {
      // 这里可以调用API获取店铺信息
      // 根据返回结果设置 hasShop 和 shopInfo
      let params = {
        cardId: this.userInfo.id
      }
      this.$api.getMyShopInfoByCard(params).then((res) => {
        if (res.success && res.result) {
          let status = res.result.status
          if (status !== null) {
            // 0待审核 1审核通过 2审核拒绝
            // 根据审核结果查看对应的信息
            if (status === 1) {
              //   审核成功
              this.shopInfo = res.result.shopDetail || {}
              this.hasShop = true
              this.shopInfo.status = status
              this.shopInfo.status_dictText = '营业中'
              // 根据审核状态显示不同提示
              this.handleShopStatus(this.shopInfo.status)
            } else {
              // 审核中或者审核失败,展示入驻时候的信息
              this.shopInfo = res.result.shopEntry || {}
              this.shopInfo.status = status
              this.shopInfo.status_dictText = status === 0 ? '待审核' : "审核拒绝"
              this.hasShop = true
              // 根据审核状态显示不同提示
              this.handleShopStatus(this.shopInfo.status)
            }
            this._getBusinessData()
          } else {
            this.hasShop = false
            this.shopInfo = {}
          }
        } else {
          this.shopInfo = {}
          this.hasShop = false
        }
        console.log('加载店铺信息', res)
      })
    },

    // 处理店铺审核状态
    handleShopStatus(status) {
      switch (status) {
        case 0: // 待审核
          uni.showModal({
            title: '店铺待审核',
            content: '您的店铺正在待审核，请耐心等待审核结果。审核通过后即可正常使用店铺功能。',
            showCancel: false,
            confirmText: '我知道了'
          })
          break
        case 1: // 审核通过
          // 审核通过，不需要额外处理
          break
        case 2: // 审核失败
          const rejectReason = this.shopInfo.remark || '未提供具体原因'
          uni.showModal({
            title: '店铺审核失败',
            content: `很抱歉，您的店铺审核未通过。\n\n拒绝原因：${rejectReason}\n\n请根据拒绝原因重新编辑店铺信息并提交审核。`,
            confirmText: '重新编辑',
            cancelText: '稍后再说',
            success: (res) => {
              if (res.confirm) {
                // 跳转到店铺编辑页面
                uni.navigateTo({
                  url: '/pagesMall/myShop/joinShop?isNew=0'
                })
              }
            }
          })
          break
        default:
          // 未知状态，不需要额外处理
          break
      }
    },

    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 编辑店铺信息
    editShop() {
      console.log('编辑店铺信息')
      // uni.navigateTo({
      //   url: '/pagesMall/myShop/editShop'
      // })
    },

    // 重新编辑店铺信息（审核失败时）
    reEditShop() {
      uni.navigateTo({
        url: '/pagesMall/myShop/joinShop?isNew=0'
      })
    },

    // 查看提交信息（待审核时）
    viewSubmittedInfo() {
      uni.navigateTo({
        url: '/pagesMall/myShop/joinShop?isNew=0&viewOnly=true'
      })
    },

    // 店铺入驻
    joinShop() {
      console.log('店铺入驻')
      uni.showModal({
        title: '店铺入驻',
        content: '是否要申请开通店铺？',
        success: (res) => {
          if (res.confirm) {
            // 跳转到店铺入驻页面
            uni.navigateTo({
              url: '/pagesMall/myShop/joinShop?isNew=1'
            })
          }
        }
      })
    },

    // 页面跳转
    goToPage(url) {
      console.log('跳转到:', url)
      // uni.showToast({
      //   title: '功能开发中',
      //   icon: 'none'
      // })
      uni.navigateTo({url})
    }
  }
}
</script>

<style lang="scss" scoped>
.shop-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.status-bar {
  background-color: #fff;
}

.custom-navbar {
  background-color: #fff;
  border-bottom: 2rpx solid #ebeef5;
  position: sticky;
  top: 0;
  z-index: 1000;
}

.navbar-content {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
}

.navbar-left {
  width: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-title {
  flex: 1;
  text-align: center;
  font-size: 36rpx;
  font-weight: 600;
  color: #303133;
}

.navbar-right {
  width: 80rpx;
}

.scroll-content {
  height: calc(100vh - 88rpx);
}

.shop-info-section {
  margin: 30rpx;
  border-radius: 20rpx;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

.shop-info {
  padding: 40rpx;
}

.shop-header {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30rpx;
}

.shop-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 20rpx;
  background-color: #f0f2f5;
  margin-right: 30rpx;
}

.shop-details {
  flex: 1;
}

.shop-name {
  display: block;
  font-size: 36rpx;
  font-weight: 600;
  color: #303133;
  margin-bottom: 10rpx;
}

.shop-category {
  display: block;
  font-size: 26rpx;
  color: #909399;
  margin-bottom: 20rpx;
}

.shop-stats {
  display: flex;
  gap: 30rpx;
}

.stat-item {
  font-size: 24rpx;
  color: #606266;
}

.shop-actions {
  display: flex;
  align-items: center;
}

.action-btn {
  width: 60rpx;
  height: 60rpx;
  border-radius: 30rpx;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;

  &:active {
    background-color: #e9ecef;
    transform: scale(0.95);
  }
}

.shop-status {
  display: flex;
  justify-content: space-between;
  padding-top: 30rpx;
  border-top: 2rpx solid #f5f7fa;
}

.status-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.status-label {
  font-size: 24rpx;
  color: #909399;
  margin-bottom: 10rpx;
}

.status-value {
  font-size: 28rpx;
  font-weight: 600;
  color: #303133;

  &.active {
    color: #10c469;
  }

  &.pending {
    color: #ffb800;
  }

  &.rejected {
    color: #ff6b35;
  }

  &.money {
    color: #ff6b35;
  }

  &.action-text {
    color: #4182bb;
    text-decoration: underline;
    cursor: pointer;
  }
}

.reject-reason {
  margin-top: 30rpx;
  padding: 30rpx;
  background-color: #fef7f7;
  border-radius: 16rpx;
  border-left: 6rpx solid #ff6b35;
}

.reason-header {
  margin-bottom: 15rpx;
}

.reason-label {
  font-size: 28rpx;
  font-weight: 600;
  color: #ff6b35;
}

.reason-content {
  padding: 20rpx;
  background-color: #fff;
  border-radius: 12rpx;
  border: 2rpx solid #ffe7e7;
}

.reason-text {
  font-size: 26rpx;
  color: #606266;
  line-height: 1.6;
}

.no-shop {
  padding: 80rpx 40rpx;
  text-align: center;
}

.no-shop-icon {
  width: 160rpx;
  height: 160rpx;
  margin: 0 auto 30rpx;
  opacity: 0.6;
}

.no-shop-title {
  display: block;
  font-size: 32rpx;
  font-weight: 600;
  color: #303133;
  margin-bottom: 15rpx;
}

.no-shop-desc {
  display: block;
  font-size: 26rpx;
  color: #909399;
  margin-bottom: 40rpx;
}

.join-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 24rpx 60rpx;
  background: linear-gradient(135deg, #4182bb 0%, #5a96d4 100%);
  border-radius: 50rpx;
  box-shadow: 0 8rpx 24rpx rgba(65, 130, 187, 0.3);
  transition: all 0.3s ease;

  &:active {
    transform: translateY(2rpx);
    box-shadow: 0 4rpx 12rpx rgba(65, 130, 187, 0.3);
  }
}

.join-text {
  font-size: 30rpx;
  font-weight: 600;
  color: #fff;
}

.menu-section {
  margin: 0 30rpx 30rpx;
}

.menu-group {
  margin-bottom: 40rpx;
}

.group-title {
  display: block;
  font-size: 28rpx;
  font-weight: 600;
  color: #303133;
  margin-bottom: 20rpx;
  padding-left: 10rpx;
}

.menu-list {
  background-color: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.06);
}

.menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 40rpx;
  border-bottom: 2rpx solid #f5f7fa;
  transition: all 0.3s ease;

  &:last-child {
    border-bottom: none;
  }

  &:active {
    background-color: #f8f9fa;
  }
}

.menu-left {
  display: flex;
  align-items: center;
  flex: 1;
}

.menu-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 30rpx;

  &.product-icon {
    background-color: rgba(65, 130, 187, 0.1);
  }

  &.order-icon {
    background-color: rgba(255, 107, 53, 0.1);
  }

  &.distribution-icon {
    background-color: rgba(16, 196, 105, 0.1);
  }

  &.review-icon {
    background-color: rgba(255, 184, 0, 0.1);
  }
}

.menu-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #303133;
}

.menu-right {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.menu-count {
  font-size: 24rpx;
  color: #909399;
  background-color: #f5f7fa;
  padding: 6rpx 12rpx;
  border-radius: 12rpx;
  min-width: 40rpx;
  text-align: center;
}

.safe-area-bottom {
  height: calc(env(safe-area-inset-bottom) + 40rpx);
}
</style>
